<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
 ! Excerpted from "Mastering Dojo",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material, 
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose. 
 ! Visit http://www.pragmaticprogrammer.com/titles/rgdojo for more book information.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Wizard</title>
    <style type="text/css">
        @import "/dojoroot/dijit/themes/tundra/tundra.css";
        @import "/dojoroot/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="/dojoroot/dojo/dojo.js"  djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.layout.StackContainer");
       dojo.require("dijit.layout.ContentPane");
       dojo.require("dijit.form.Button");
    </script>
</head>
<body class="tundra">


    <div dojoType="dijit.layout.StackContainer" jsId="sc" 
         style="width:300px;height:300px">
    
        <div dojoType="dijit.layout.ContentPane" jsId="start">
            <p>Did you eat your meat?</p>
            <input type="radio" name="ateIt" id="ateItY" value="Y" checked>
            <label for="ateIt">Yes</label>
            <br/>
            <input type="radio" name="ateIt" id="ateItN" value="N">
            <label for="ateIt">No</label>
            <br/>
            <div dojoType="dijit.form.Button">
                Next &gt;&gt;
                <script type="dojo/method" event="onClick">
                    // If they chose Y goto pane "pudding", otherwise "noPudding"
                    sc.selectChild(
                       dojo.byId("ateItY").checked ? pudding : noPudding
                    );   
                </script> 
            </div>
        </div>

        <div dojoType="dijit.layout.ContentPane" jsId="pudding">
            <p>Choose Your Pudding</p>
            <select name="puddingType">
                <option>Chocolate</option>
                <option>Vanilla</option>
                <option>Blood (in England only)</option>
            </select>
            <br/>
            <div dojoType="dijit.form.Button">
                &lt;&lt; Previous
                <script type="dojo/method" event="onClick">
                    sc.back();   
                </script> 
            </div>
            <div dojoType="dijit.form.Button">
                Finish &gt;&gt;
                <script type="dojo/method" event="onClick">
                    sc.selectChild(done);   
                </script> 
            </div>
        </div>

        <div dojoType="dijit.layout.ContentPane" jsId="noPudding">
            <p>
                You can't have any pudding.  
                How can you have any pudding if you don't eat your meat?
            </p>
            <br/>
            <div dojoType="dijit.form.Button">
                &lt;&lt; Previous
                <script type="dojo/method" event="onClick">
                    sc.selectChild(start);   
                </script> 
            </div>
            <div dojoType="dijit.form.Button">
                Finish &gt;&gt;
                <script type="dojo/method" event="onClick">
                    sc.forward();   
                </script> 
            </div>
        </div>
        
        <div dojoType="dijit.layout.ContentPane" jsId="done">
            All in all, we're all just bricks in the wall, y'all!
        </div>
    </div>

 </body>
 </html>